<template>
  <view class="container">
    <view class="amount">
      ¥{{orderInfo.pay_price}}
    </view>
    <view class="pay-way">
      <view class="pay-way-title">
        支付方式
      </view>
      <view class="pay-way-info">
        <view class="pay-way-info-item" v-for="(item, index) in payTypeList" :key="index" @click="setIndex(index)">
          <image class="fl-icon" :src="item.url" mode=""></image>
          <view class="middel">
            <text class="txt1">{{item.label}}</text>
            <text class="txt2" v-if="item.count">￥{{item.count}}</text>
          </view>
          <image class="round-icon" :src="currentIndex == index?'/static/images/roundActive.png':'/static/images/round.png'" mode=""></image>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="btn" @click="toPay">
        确认支付
      </view>
    </view>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default{
    data(){
      return{
        payTypeList: [
          {
            url: "/static/images/wechat.png",
            label: "微信支付",
            value: "weixin"
          },
          {
            url: "/static/images/apliay.png",
            label: "支付宝支付",
            value: "alipay"
          },
          {
            url: "/static/images/wallet.png",
            label: "钱包余额",
            value: "yue",
            count: 0
          },
          {
            url: "/static/images/giftCard.png",
            label: "礼品卡余额",
            value: "giftcard",
            count: 0
          },
        ],
        currentIndex: 0,
        orderInfo: {},
        params: {
          uni: "",
          paytype: "weixin"
        }
      }
    },
    onLoad(option) {
      this.getOrderInfo(option.id);
    },
    methods: {
      getOrderInfo(id){
        reqApi.orderCashier({id}).then(res=>{
          console.log("订单收银台", res);
          this.params.uni = res.data.order_id;
          this.orderInfo = res.data;
          this.payTypeList[2].count = res.data.now_money;
          this.payTypeList[3].count = res.data.gift_card_money;
          
        })
      },
      setIndex(index){
        this.currentIndex = index;
        this.params.paytype = this.payTypeList[index].value;
      },
      toPay(){
        reqApi.payOrder(this.params).then(res=>{
          uni.showToast({
            title: "支付成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(()=>{
            uni.switchTab({
              url: "/pages/home/index"
            })
          }, 1500)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container{
    padding: 0 30rpx;
    box-sizing: border-box;
    .amount{
      font-weight: 500;
      font-size: 64rpx;
      color: #F52705;
      text-align: center;
      margin-top: 80rpx;
    }
    .pay-way{
      margin-top: 48rpx;
      padding: 28rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      background: #fff;
      .pay-way-title{
       font-weight: 500;
       font-size: 32rpx;
       color: #000000;
      }
      .pay-way-info{
        .pay-way-info-item{
          margin-top: 48rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .fl-icon{
            width: 40rpx;
            height: 40rpx;
          }
          .middel{
            display: flex;
            flex: 1;
            justify-content: flex-start;
            padding: 0 16rpx;
            box-sizing: border-box;
            .txt1{
              font-weight: 400;
              font-size: 28rpx;
              color: #000000;
            }
            .txt2{
              font-weight: 400;
              font-size: 28rpx;
              color: #FF3B30;
            }
          }
          .round-icon{
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
    }
    .footer{
      position: fixed;
      width: 100%;
      bottom: 30rpx;
      .btn{
        width: 694rpx;
        height: 88rpx;
        background: #F86F03;
        border-radius: 44rpx;
        text-align: center;
        line-height: 88rpx;
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
      }
    }
  }
</style>